<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 100px;
            overflow: hidden;
        }

        body {
            font-size: .22rem;
            background-color: #f5f5f5;
        }

        .header {
            width: 100%;
            height: 130px;
            background-color: #0af;
            position: relative;
        }

        .footer {
            width: 100%;
            height: 60px;
           position:fixed;
            bottom: 0;
        }

        .content {
            width: 7.2rem;
            /*background-color: yellow;*/
            margin: 0 auto;
            overflow: auto;
        }

        .swapper {
            width: 100%;
            height: 150px;
            background-color: #FFFFFF;
            margin: 1px 0;
        }

        .header-one {
            width: 330px;
            height: 80px;
            position: absolute;
            top: 25px;
            left: 22px;

        }

        .header-one-a {
            width: 80px;
            height: 80px;
            display: inline-block;
            position: relative;
        }

        .header-one-a img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
            display: inline-block;
        }

        .profile {
            width: 210px;
            height: 80px;
            display: inline-block;
            position: absolute;
            margin-left: 15px;
        }

        .profile-b {
            font-size: .27rem;
            font-weight: 700;
            display: -webkit-flex;
            align-items: center;
            display: inline-block;
            color: #FFFFFF;
        }

        .profile-c {
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            font-size: .14rem;
            margin-top: 10px;
            color: #FFFFFF;
        }

        .profile-c span {
            margin-left: 5px;
        }

        .header-one-b {
            width: 20px;
            height: 80px;
            float: right;
            display: inline-block;
        }

        .header-one-b i {
            line-height: 80px;
            color: #FFFFFF;
        }

        .swapper {
            width: 100%;
            height: 80px;
            /*background-color: yellow;*/
        }

        .swapper .index-a {
            text-decoration: none;
            display: table-cell;
            width: 188px;
            height: 80px;
            vertical-align: middle;
            text-align: center;


        }

        .index-a p {
            color: #666666;
            font-size: 0.13rem;
            font-weight: 700;
        }

        .index-a i {
            color: #f5f5f5;
        }

        .index-one {
            width: 32px;
            height: 32px;
            display: block;
            background-color: rgb(255, 95, 62);
            border-radius: 50%;
            margin: 0 auto;
        }

        .swapper1 {
            width: 100%;
            /*height: 50px;*/

            margin-top: 15px;
        }

        .swapper1 i {
            line-height: 40px;
            margin-left: 15px;
        }

        .swapper1 .map {
            margin-left: 10px;
            font-size: .15rem;
            color: #333;
        }

        .index-two {
            background-color: rgb(106, 194, 11);
            width: 32px;
            height: 32px;
            display: block;
            border-radius: 50%;
            margin: 0 auto;
        }
        .swapper1-one{
            background-color: #FFFFFF;
            height: 40px;
        }
        .swapper1-one:nth-child(1){
            margin-top: 15px;

        }
        .swapper1-one:nth-child(2){
            margin-top: 15px;

        }
        .swapper1-one:nth-child(4){
              margin-top: 15px;

          }
        .swapper1-one:nth-child(6){
            margin-bottom: 15px;

        }
        .swapper2 {
            position: relative;
            left: 150px;
            color: #4da6f0;
            font-size: .16rem;
        }
        .footer {
            width: 100%;
            /*height: 100px;*/
            display: flex;
            height: 60px;

        }

        .footer a {
            /*height: 100px;*/
            width: 25%;
            /*line-height: 100px;*/
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-decoration: none;
        }

        .footer .normal {
            color: #999;
        }

        .footer .active {
            color: #00a4ff;
        }

        .footer a i {
            display: block;
            padding-top: 15px;
            /*height: 50px;*/
            width: 100%;
            /*padding-top: 25px;*/
            text-align: center;

        }

        .footer a span {
            display: block;
            /*height: 50px;*/
            width: 100%;
            /*line-height: 25px;*/
            padding-bottom: 5px;
            text-align: center;
            font-size: 0.12rem;
        }
    </style>
</head>
<body>
<div id="app">
<div class="header">
    <div class="header-one">
        <div class="header-one-a">
            <img src="">
        </div>
        <div class="profile">
            <p class="profile-b">登录/注册</p>
            <p class="profile-c"><i class="fa fa-mobile"></i><span>登录后享受更多特权</span></p>
        </div>
        <div class="header-one-b">

            <i class="fa fa-chevron-right"></i>
        </div>

    </div>
</div>
<div class="content">
    <!-- swapper -->
    <div class="swapper">
        <a href="#" class="index-a"><span class="index-one">
            <i class="fa fa-envelope-o"></i>
        </span>
            <p class="index-b">红包</p></a>

        <a href="#" class="index-a"> <span class="index-two">
            <i class="fa fa-database"></i> </span>
            <p class="index-b">金币</p></a>
    </div>


        <div class="swapper1">
            <div class="swapper1-one" v-for="sky in skys">
                <i :class="sky.photo" style="color: #0af"></i>
                <span class="map">{{sky.name}}</span>
            </div>
        </div>
        <div class="swapper2">
            <span>隐私政策</span>
        </div>


<div class="footer">

    <a :href="item.url" v-for="(item,index) in items" :class="{normal:item.normal,active:item.active}"
       @click="active(index)">
        <i :class="item.photo"></i>
        <span>{{item.name}}</span>

    </a>
</div>
</div>
</div>
<script>

    var vm = new Vue({
        el: "#app",
        data: {
            skys: [
                {
                    photo:'fa fa-map-marker',
                    name:'我的地址'
                },
                {
                    photo:'fa fa-shopping-bag',
                    name:'金币商城'
                },
                {
                    photo:'fa fa-gift',
                    name: '分享拿20元现金'
                },
                {
                    photo:'fa fa-headphones',
                    name: '我的客服'
                },
                {
                    photo:'fa fa-edge',
                    name: '下载饿了么APP'
                }, {
                    photo:'fa fa-file-text-o',
                    name: '规则中心'
                }
                ],
            items: [
                {
                    id:1,
                    photo: "fa fa-edge ",
                    name: "首页",
                    normal: false,
                    active: true,
                    url:"饿了么.html"
                },
                {
                    id:2,
                    photo: "fa fa-compass ",
                    name: "发现",
                    normal: true,
                    active: false,

                },
                {
                    id:3,
                    photo: "fa fa-file-text-o ",
                    name: "订单",
                    normal: true,
                    active: false,
                    url:"我的订单.html"
                },
                {
                    id:4,
                    photo: "fa fa-user",
                    name: "我的",
                    normal: true,
                    active: false
                }
            ],
        },
        methods:{
            active:function (index) {
                var i=0;
                for(;i<this.items.length;i++){
                    if(this.items[i].id!=this.items[index].id){
                        this.items[i].normal=true;
                        this.items[i].active=false;
                    }
                }
                this.items[index].normal=false;
                this.items[index].active=true;

            },
            late:function (change) {
                this.change = change;
            }
        }
    })
</script>

</body>
</html>